<template>
    <view class="task-item">
        <view class="icon"><uni-icons :type="taskItem.is_done ? 'checkbox-filled' : 'circle'" size="25" color="#0099ff" @click="checkbox_change(item)"></uni-icons></view>
        <view class="task-item-name">
            <text :class="taskItem.is_done ? 'done-item-text' : ''" @click="checkbox_change">{{ taskItem.content }}</text>
        </view>
    </view>
</template>

<script>
import BaseMixin from '../../mixins/BaseMixin.js';
import uniIcons from '../../components/uni-icons/uni-icons.vue';

export default {
    components: { uniIcons },

    mixins: [BaseMixin],

    props: {
        taskItem: {
            type: Object,
            default: () => {
                return {
                    id: null,
                    task_id: null,
                    content: null,
                    is_done: false
                };
            }
        }
    },

    methods: {
        checkbox_change(item) {
            item.is_done = !item.is_done;
            this.update_task_item(item); // 更新后台数据
            this.$forceUpdate();
        },

        // 获取变化的数据id和是否已完成
        get_changed_item(values) {
            const vm = this;
            let id = null;
            if (this.done_item_ids.length > values.length) {
                id = this.done_item_ids.filter(item_id => !values.includes(item_id))[0];
            } else {
                id = values.filter(value => !vm.done_item_ids.includes(value))[0];
            }

            return this.task_items.find(item => item.id == id);
        },

        update_task_item() {
            const item = this.taskItem;
            this.put(`/todo_items/${item.id}/`, item).then(res => {});
        }
    }
};
</script>

<style scoped lang="scss">
.task-item {
    display: flex;
    background-color: #0081ff;

    align-items: center;

    .icon {
        flex: 1;
    }
    .task-item-name {
        flex: 7;

        .done-item-text {
            text-decoration: line-through;
        }
    }
}
</style>
